<script setup lang="ts">
import { useProgressStore } from '@/stores/progressStore'
import { onMounted, ref } from 'vue'

const progress = useProgressStore()
const showBanner = ref(false)

// 检查是否有可恢复进度
onMounted(() => {
  if (progress.restore()) {
    showBanner.value = true
  }
})

const handleResume = () => {
  // 路由跳转到对应步骤
  const routeMap = {
    1: '/yijing',
    2: '/yijing',
    3: '/yijing',
    4: '/yijing',
    5: '/yijing',
    6: '/yijing',
    7: '/result'
  }
  router.push(routeMap[progress.currentStep] || '/')
  showBanner.value = false
}
</script>

<template>
  <div 
    v-if="showBanner"
    class="fixed bottom-4 left-1/2 transform -translate-x-1/2
           bg-yellow-100 border border-yellow-400 text-yellow-700 
           px-4 py-3 rounded-lg shadow-lg z-50 flex items-center gap-4"
  >
    <span>检测到未完成的算卦进度，是否继续？</span>
    <button 
      @click="handleResume"
      class="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded"
    >
      继续算卦
    </button>
    <button 
      @click="progress.clear(); showBanner = false"
      class="bg-gray-500 hover:bg-gray-600 text-white px-3 py-1 rounded"
    >
      重新开始
    </button>
  </div>
</template>